<div class="row">
    <div class="col-md-12">
        <p-confirmDialog header="{{'confirm' | translate}}" icon="fa fa-question-circle" #cd>
            <p-footer>
                <button type="button" icon="fa-check" class="btn btn-primary btn-margin-1rem"
                    (click)="cd.accept()">{{'accept' | translate}}</button>
                <button type="button" icon="fa-close" class="btn btn-default"
                    (click)="cd.reject()">{{'reject' | translate}}</button>
            </p-footer>
        </p-confirmDialog>

        <form class="form-inline top-filter-form form-bgcolor" role="form">
            <div class="form-group btn-margin-1rem">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="button">
                            <i class="fa fa-search" aria-hidden="true"></i>
                        </button>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <button class="btn btn-primary" type="button" (click)="newCategory()">
                    <i class="fa fa-user" aria-hidden="true"></i> {{'categoryTable.newCategory' | translate}}
                </button>
            </div>
        </form>
        <div class="row">
            <div class="col-md-12 form-bgcolor col-padding ">
                <div class="user-item-container">
                    <p-dataTable expandableRows="true" [value]="categories" [rows]="10" [paginator]="true"
                        [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]" dataKey="index">
                        <p-column expander="true" styleClass="col-icon" [style]="{'width':'50px'}"></p-column>
                        <p-column field="name" header="{{'categoryTable.categoryName' | translate}}" [sortable]="true">
                        </p-column>
                        <p-column field="creator" header="{{'categoryTable.creator' | translate}}" [sortable]="true"
                            [editable]="true"></p-column>
                        <p-column field="createTime" header="{{'categoryTable.createTime' | translate}}"
                            [sortable]="true" [editable]="true">
                            <ng-template let-col let-category="rowData" pTemplate="body">
                                <span>{{category[col.field] | date:'yyyy-MM-dd HH:mm:ss'}}</span>
                            </ng-template>
                        </p-column>
                        <p-column header="{{'operate' | translate}}" [style]="{'width':'80px'}">
                            <ng-template let-item="rowData" pTemplate="body">
                                <button type="button" class="btn btn-primary"
                                    (click)="delCategory(item)">{{'delItem' | translate}}</button>
                            </ng-template>
                        </p-column>
                        <ng-template let-category pTemplate="rowexpansion">
                            <div class="ui-grid ui-grid-responsive ui-fluid">
                                <div class="ui-grid-row">
                                    <div class="ui-grid-col-12">
                                        <div class="ui-grid ui-grid-responsive ui-grid-pad">
                                            <div class="ui-grid-row">
                                                <div class="ui-grid-col-2">{{'categoryTable.name' | translate}}：</div>
                                                <div class="ui-grid-col-10">{{category.name}}</div>
                                            </div>
                                            <div class="ui-grid-row">
                                                <div class="ui-grid-col-2">{{'categoryTable.creator' | translate}}：
                                                </div>
                                                <div class="ui-grid-col-10">{{category.creator}}</div>
                                            </div>
                                            <div class="ui-grid-row">
                                                <div class="ui-grid-col-2">{{'categoryTable.createTime' | translate}}：
                                                </div>
                                                <div class="ui-grid-col-10">
                                                    {{category.createTime | date:'yyyy-MM-dd HH:mm:ss'}}
                                                </div>
                                            </div>
                                            <div class="ui-grid-row">
                                                <div class="ui-grid-col-2">{{'categoryTable.remarks' | translate}}：
                                                </div>
                                                <div class="ui-grid-col-10">{{category.remark}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </ng-template>
                    </p-dataTable>
                </div>
            </div>
        </div>
    </div>
</div>